<template>
  <div class="container">
    <div>
      <p>count的值： {{count}}</p>
      <button @click="add">+自增</button>
    </div>

    <hr>

    <div>
      <p>{{obj.name}}</p>
      <p>{{obj.age}}</p>
      <p>{{obj.brand[0].name}}</p>
      <button @click="updatename">改名字</button>
      <button @click="updateBrandName">改品牌</button>
    </div>
  </div>
</template>

<script>
import { reactive, ref, watch } from 'vue'

export default {
  name: 'App',
  setup () {
    const count = ref(0)
    const obj = reactive({
      name: 'ls',
      age: 10,
      //因为brand是一个对象，需要深度监听deep:true，才能被监听到
      brand: [
        {
          id: 1,
          name: '宝马'
        }
      ]
    })

    const add = () => {
      count.value++
    }

    const updatename = () => {
      obj.name = 'ww'
    }
    const updateBrandName = () => {
      obj.brand[0].name = '奔驰'

    }

    // 1： 监听数据变化，使用watch
    // watch(count, (newVal, oldVal) => {
    //   console.log(newVal, oldVal);
    // })

    // 2：监听reavtive复杂数据对象数据
    watch(obj, () => {
      console.log('数据发生了改变');
    })
    watch(() => obj.brand, () => {
      console.log('brand数据发生了改变');
    }, {
      deep: true, // 深度监听
      // // 默认执行一次
      immediate: true
    })

    // 3：一个watch，来监听多个数据的变化
    // watch([count, obj], () => {
    //   console.log('多个数据发生了改变');
    // })

    // //4：此时指向监听对象中，某一个属性的变化
    // // 需要写成，函数返回该属性() => obj.name,
    // watch(() => obj.name, () => {
    //   console.log('监听obj.name改变了');
    // })

    return { count, add, obj, updatename, updateBrandName }
  }
}
</script>

<style>
</style>